<template>
    <div>
        <van-nav-bar
            left-arrow
            @click-left="onClickLeft"
        />
        <!-- head -->
        <van-card
            :thumb="head.img">
            <div slot="tags" class="tags">
                <h2 class="title">{{head.name}}</h2>
                <p class="notice">{{head.notice}}</p>
                <div class="else">
                    <span v-for="(item, index) in head.els" :key="index">{{item}}</span>
                </div>
            </div>
        </van-card>

        <van-tabs v-model="active" sticky animated class="order">
            <van-tab  title="点餐">
                <ordering :orderList="orderList"></ordering>
            </van-tab>
            <van-tab  title="评价">
                <commit :scoreList="head"></commit>
            </van-tab>
            <van-tab  title="商家">
                <merchant :merchantInfo="head"></merchant>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import ordering from './ordering'
import commit from './commit'
import merchant from './merchant'
import { apiGetShopInfo } from '../../api/index'
export default {
    data() {
        return {
            active: 0,
            head: this.$store.state.shopInfo,
            orderList: null
        }
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1)
        }
    },
    components: {
        ordering,
        commit,
        merchant
    },
    created() {
        let id = this.$route.params.id;
        apiGetShopInfo(id)
        .then(res => {            
            this.$store.state.shopInfo = this.head = res.data.data.result.head
            this.orderList = res.data.data.result.ordering
        })
        .catch(err => {
            console.log(err)
        })
    }
}
</script>

<style lang="less" scoped>
    .main {
        .van-nav-bar {
            background: #333;
            i {
                color: #fff;
            }
            &::after {
                border: 0;
            }
        }
        .van-card {
            margin-top: -1px;
            background: #333;
            color: #fff;
            .tags {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                height: 100%;
                .title {
                    margin: 0;
                }
                .notice {
                    margin: 0;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .else {
                    span {
                        margin-right: 5px;
                    }
                }
            }
        }
    }
</style>

<style lang="less">
</style>

